{% extends "base.html" %}

{% block title %}仪表盘 - 设备管理系统{% endblock %}

{% block styles %}
<style>
    .dashboard-header {
        margin-bottom: 30px;
    }
    
    .dashboard-header h1 {
        color: var(--primary-color);
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .dashboard-header p {
        color: #666;
        font-size: 14px;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
    }
    
    .stat-card .stat-icon {
        font-size: 24px;
        margin-bottom: 15px;
        color: var(--accent-color);
    }
    
    .stat-card .stat-title {
        color: #666;
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .stat-card .stat-value {
        color: var(--primary-color);
        font-size: 24px;
        font-weight: 600;
    }
    
    .recent-activity {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .recent-activity h2 {
        color: var(--primary-color);
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    
    .activity-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .activity-item {
        padding: 15px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: var(--accent-color);
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-title {
        color: #333;
        font-weight: 500;
        margin-bottom: 5px;
    }
    
    .activity-time {
        color: #666;
        font-size: 12px;
    }
    
    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .activity-item {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .activity-icon {
            margin-bottom: 10px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-xl py-4">
    <h2 class="page-title">仪表盘</h2>
    <div class="dashboard-header">
        <h1><i class="fas fa-tachometer-alt"></i> 仪表盘</h1>
        <p>欢迎回来，{{ session.username }}！</p>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-box"></i>
            </div>
            <div class="stat-title">在库设备</div>
            <div class="stat-value">{{ status_stats.in_stock }}</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-arrow-up"></i>
            </div>
            <div class="stat-title">已出库设备</div>
            <div class="stat-value">{{ status_stats.outbound }}</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-trash"></i>
            </div>
            <div class="stat-title">已销库设备</div>
            <div class="stat-value">{{ status_stats.discarded }}</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-cubes"></i>
            </div>
            <div class="stat-title">设备总数</div>
            <div class="stat-value">{{ status_stats.total }}</div>
        </div>
    </div>

    <div class="recent-activity">
        <h2><i class="fas fa-history"></i> 最近操作</h2>
        <ul class="activity-list">
            {% for operation in recent_operations %}
            <li class="activity-item">
                <div class="activity-icon">
                    {% if operation[0] == 'login' %}
                    <i class="fas fa-sign-in-alt"></i>
                    {% elif operation[0] == 'logout' %}
                    <i class="fas fa-sign-out-alt"></i>
                    {% elif operation[0] == 'inbound' %}
                    <i class="fas fa-arrow-down"></i>
                    {% elif operation[0] == 'outbound' %}
                    <i class="fas fa-arrow-up"></i>
                    {% elif operation[0] == 'discard' %}
                    <i class="fas fa-trash"></i>
                    {% else %}
                    <i class="fas fa-info-circle"></i>
                    {% endif %}
                </div>
                <div class="activity-content">
                    <div class="activity-title">{{ operation[1] }}</div>
                    <div class="activity-time">{{ operation[2] }}</div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 自动刷新页面
    setTimeout(function() {
        window.location.reload();
    }, 300000); // 每5分钟刷新一次
</script>
{% endblock %}